import PropTypes from "prop-types"
import React, { memo } from "react"
import { PaginationWrapper } from "./style"
import Pagination from "@mui/material/Pagination"
import { current } from "@reduxjs/toolkit"
import { useDispatch, useSelector } from "react-redux"
import { changeCurrentPage, fetchEntireData } from "@/store/modules/entire"

const EntirePagination = memo((props) => {

    const dispatch = useDispatch()
    // 获取props
    const { totalCount, currentPage, roomList } = props

    // 分页计数
    const startCount = currentPage * 20 + 1
    const endCount = (currentPage + 1) * 20
    const totalPage = Math.ceil(totalCount / 20)

    // 翻页操作
    const handleChange = (e,value) => {
        // 更新redux的当前页码
        dispatch(changeCurrentPage(value-1))
        // 获取新的数据
        dispatch(fetchEntireData())
        // 回到顶部
        window.scrollTo(0,0)
    }
    return (
        <PaginationWrapper>
            {roomList.length>0 && (
                <div className="pagination">
                    <Pagination count={totalPage} onChange={handleChange} />
                    <div className="desc">
                        第{startCount}-{endCount}个房源,共超过{totalCount}个
                    </div>
                </div>
            )}
        </PaginationWrapper>
    )
})

EntirePagination.propTypes = {
    totalCount: PropTypes.number,
    currentPage: PropTypes.number,
    roomList: PropTypes.array,
}

export default EntirePagination
